<template>
  <div class="register">
    <Row class="top-row">
      <div class="register-str">
        <span class="register-logo">
          <img src="../../assets/images/logo.png" height="50" >
        </span>
        <span class="register-center"> | </span>
        <span class="register-title">
         测试注册页面
        </span>
      </div>
    </Row>
    <div class="register-form">
      <Row>
        <H1>账号注册</H1>
        <div class="register-login">
          已有账号?<a @click="jumpLogin">
          点此登录
        </a>
        </div>
      </Row>

      <Divider />
      <Form ref="formInline" class="register-content" :model="registerInfo" :rules="registerInfoRule">
        <FormItem label="" prop="phoneNum">
          <Input  size="large" v-model="registerInfo.phoneNum"  :maxlength="50" placeholder="手机号">
            <span slot="prepend">+86(中国)</span>
          </Input>
        </FormItem>
        <FormItem label="" prop="msgCode">
          <Input  size="large" v-model="registerInfo.msgCode" @on-keyup="handleInput" :maxlength="6" placeholder="短信验证码">
            <a slot="append" @click="sendCode" >获取验证码</a>
          </Input>
        </FormItem>
        <FormItem label="" prop="password">
          <Input  size="large" type="password" v-model="registerInfo.password" @on-change="setPassword"  :maxlength="50" placeholder="密码">
          </Input>
        </FormItem>
        <FormItem label="" prop="surePassword">
          <Input  size="large" type="password" v-model="registerInfo.surePassword"  :maxlength="50" placeholder="确认密码">
          </Input>
        </FormItem>
        <FormItem label="" class="btn-item">
          <Button class="register-btn" @click="registerAccount">注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册</Button>
        </FormItem>
      </Form>
    </div>
  </div>

</template>

<script>
import {sendRegisterCode,registerAccount} from "@/api/user";
import {mobilePhoneValidator, msgCodeValidator} from '@/api/data-check'
var password;

function surePasswordSame(rule, value, callback){
  if (value.length<1) {
    callback(new Error(rule.tip + '不能为空'))
  }else if (value!==password){
    callback(new Error("确认密码与设置密码不相同！"))
  }else{
    callback()
  }
}

export default {
  name: "register",
  data(){
    return{
      registerInfoRule: {
        phoneNum: [
          { required: true,  validator: mobilePhoneValidator, trigger: 'blur' ,tip:"手机号"},
        ],
        msgCode: [
          { required: true,  message: '短信验证码不能为空', trigger: 'blur' },
          {pattern: /^(-?\d+)?$/, message: '短信验证码为数字', trigger: 'blur'},
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        surePassword: [
          { required: true, tip: '确认密码',validator: surePasswordSame, trigger: 'blur' }
        ],
      },
      registerInfo:{
        phoneNum:"",
        msgCode:"",
        password:"",
        surePassword:"",
      }
    }
  },
  methods:{

    //数值正则验证
    handleInput(e) {
      e.target.value = (e.target.value.match(/^\d*(\.?\d{0,0})/g)[0]) || null
    },


    //给全局变量--passwrod赋值
    setPassword(val){
      password = this.registerInfo.password
    },
    jumpLogin(){
      this.$router.push({
        name: 'login'
      })
    },

    //发送验证码
    sendCode(){
      sendRegisterCode(this.registerInfo).then(res=>{
        if (res.code==='0'){
          this.$Message.success(res.msg)
        }else{
          this.$Message.error(res.msg)
        }
      })
    },

    //注册账号
    registerAccount(){
      this.$refs.formInline.validate((valid) => {
        if (valid) {
          registerAccount(this.registerInfo).then(res=>{
            if (res.code==='0'){
              this.$router.push({
                name: 'success-view',
                params: {
                  title: "注册成功",
                  menuName: "登录",
                  menuPath: "login",
                  something: "创建了一个账户",
                }
              })
            }else{
              this.$Message.error(res.msg);
            }
          })
        } else {
          this.$Message.warning('请完善注册信息');
        }
      })
    }

  }
}
</script>

<style lang="less" scoped>
@import './register.less';
</style>
